<template>
  <div class="page-content had-tip">
    <!--树结构-->
    <dept-car-tree-mult-pm ref="treebox" classstr="second-menu treeOverMenu" :stylestr="{width: secondMenuWidth}" :backCarObj="true" 
      :model-type="2" @selectCange="selectTreeNode"></dept-car-tree-mult-pm>
    <!--中间内容-头部-->
    <div class="top-tool">
      <div class="video-tool block">
        <div class="tool block" @click="changeScreen(1)">
          <img src="/static/image/screen-1.png" alt="">
        </div>
        <div class="tool block" @click="changeScreen(2)">
          <img src="/static/image/screen-2.png" alt="">
        </div>
        <div class="tool block" @click="changeScreen(4)">
          <img src="/static/image/screen-4.png" alt="">
        </div>
        <div class="tool block" @click="changeScreen(6)">
          <img src="/static/image/screen-6.png" alt="">
        </div>
        <div class="tool block" @click="changeScreen(8)">
          <img src="/static/image/screen-8.png" alt="">
        </div>
        <div class="tool block" @click="changeScreen(9)">
          <img src="/static/image/screen-9.png" alt="">
        </div>
        <div class="tool block" @click="closeAllVideo()">
          <img src="/static/image/video-stop-all.png" alt="">
          <div class="text" style="color:#ff3434;">关闭</div>
          <div class="tip-info">关闭所有视频</div>
        </div>
        <div class="tool select cursor-pointer">
          <img class="img-icon" src="/static/image/stream-type.png" alt />
          <span>{{currentStreamType==1?'流畅(子码流)':'清晰(主码流)'}}</span>
          <i class="point el-icon-caret-bottom"></i>
          <div class="list1 no-check">
            <div class="item" :class="{'choice':currentStreamType===0}" @click="currentStreamType=0;">
              <span class="check-info">清晰(主码流)</span>
            </div>
            <div class="item" :class="{'choice':currentStreamType===1}" @click="currentStreamType=1;">
              <span class="check-info">流畅(子码流)</span>
            </div>
          </div>
        </div>
        <div class="tool block" @click="eventScreen()">
          <img src="/static/image/screen-full.png" alt="">
          <div class="text">全屏</div>
          <div class="tip-info">全屏</div>
        </div>
      </div>
    </div>
    <!--中间内容-->
    <div class="middle-content">
      <div class="left-block fullbox" ref="left-block">
        <play-jessibuca :screnObjList="playH5List" :class="{'all-screen': videoIsAllScreen}" :resizeWidth="sidesRightWidth.width" 
          type="box" ref="h5play" @updateParent="updateParent" @clickScreen="clickScreen"></play-jessibuca>
      </div>
    </div>
    <!--云台控制框-->
    <yuntai-ctr class="yuntai" ref="yuntai" :style="{width: secondMenuWidth}" :params="currentScreen"></yuntai-ctr>
  </div>
</template>
<style lang="scss" scoped>
.page-content{
  display: flex;
  position: relative;
  flex-direction: column;
  >>>.second-menu.treeOverMenu{
    height: calc(100% - 190px);
  }
  .top-tool{
    flex-shrink: 1;
    flex-grow: 0;
    width: 100%;
    background-color: #fff;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 0;
    .block{
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .video-tool{
      margin-left: 10px;
      .tool{
        position: relative;
        margin-right: 7px;
        cursor: pointer;
        display: flex;
        align-items: center;
        &.el-button{
          background-color: var(--main-bg-color-act);
          border-color: var(--main-bg-color-act);
          &:hover{
            background-color: var(--main-bg-color);
            border-color: var(--main-bg-color);
          }
        }
        img{
          width: 24px;
          height: auto;
        }
        .text{
          font-size: 13px;
          color: #3d7fbf;
          margin-left: 2px;
        }
        .tip-info{
          position: absolute;
          top: 23px;
          left: 19%;
          padding: 3px 10px;
          white-space: nowrap;
          background-color: #fff;
          border-radius: 4px;
          border: 1px solid var(--main-bg-color-act);
          font-size: 12px;
          text-align: center;
          color: var(--main-bg-color-act);
          z-index: 1000;
          display: none;
        }
        &:hover{
          cursor: pointer;
          .tip-info{
            display: block;
          }
        }
        &.select{
          font-size: 13px;
          color: #8B91A0;
        }
        .list1{
          position: absolute;
          top: 16px;
          right: 0;
          background-color: #FFF;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          padding:4px 0;
          z-index: 999;
          display: none;
          .item{
            position: relative;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            white-space: nowrap;
            .mycheck{
              color: #fff;
              font-size: 13px;
              vertical-align: middle;
              margin-right: 5px;
              background: #dbd9d9;
              &.selected{
                background-color: var(--main-bg-color-act);
              }
            }
            .check-info{
              font-size: 13px;
            }
            &:hover{
              background-color: #f2f2f2;
            }
          }
          &.no-check{
            .check-info{
              white-space: nowrap;
            }
            .item:hover,.item.choice{
              background-color:var(--main-bg-color-act);
              .check-info{
                color:#ffffff;
              }
            }
          }
        }
        &.choice,&:hover {
          .list1{
            display: block;
          }
        }
        .input{
          >>>.el-input__inner{
            padding: 0 3px;
          }
          >>>.el-input-group__append{
            padding: 0 3px;
          }
        }
      }
    }
  }
  .middle-content{
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 100px;
    display: flex;
    .left-block{
      position: relative;
      width: 67%;
      height: 100%;
      flex-grow: 1;
      flex-shrink: 1;
      box-sizing: border-box;
      border-right: 12px solid #f3f4f5;
      &.fullbox{
        border-right: none;
      }
    }
    .all-screen{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1300;
      background-color: #fff;
    }
  }
  .yuntai{
    position: absolute;
    bottom: 0;
    left: -285px;
  }
}
</style>
<script>
import components from './components';
export default {
  name: "livePreview",
  props:{
    socketData: {
      type: Object
    },
    secondMenuWidth: {
      type: String
    },
    resizeHeight: {
      type: Number
    }
  },
  data() {
    return {
      currentStreamType: 1,//0主码流，1子码流
      sidesRightWidth: {width: "0"},
      playH5List:[//id: this.randomStr(8),hadUsed: false,hide: false,state: 0,terminalId: "",channel: 1,name: "",streamType: 0,isDevice:true,realPlay:true//state=0停止，1播放，2暂停
        {id: this.randomStr(8),hadUsed: false,isDevice:true,realPlay:true},
        {id: this.randomStr(8),hadUsed: false,isDevice:true,realPlay:true},
        {id: this.randomStr(8),hadUsed: false,isDevice:true,realPlay:true},
        {id: this.randomStr(8),hadUsed: false,isDevice:true,realPlay:true}
      ],//默认四个窗口
      videoIsAllScreen: false,//播放器是否处于全屏状态
      screenAlling: false,//正在全屏状态中
      currentScreen: {},
    };
  },
  watch: {
    resizeHeight(val){
      if(this.videoIsAllScreen&&!this.screenAlling){
        this.eventScreen();
      }
    }
  },
  components: {
    "yuntai-ctr": components.yuntaiCtr
  },
  methods: {
    clickScreen(data){//选中了某个播放器窗口
      console.log("选中了某个播放器窗口",data)
      this.currentScreen = {
        device:data.terminalId,
        channel:data.channel
      }
    },
    eventScreen(){//播放器部分全屏全屏非全屏展示
      if(this.videoIsAllScreen){//要非全屏
        console.log("要非全屏");
        // 判断各种浏览器，找到正确的方法
        var exitMethod = document.exitFullScreen || //W3C
          document.mozCancelFullScreen || //FireFox
          document.webkitExitFullscreen || //Chrome等
          document.webkitExitFullscreen; //IE11
        try {
          if (exitMethod) {
            exitMethod.call(document);
          } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
              wscript.SendKeys("{F11}");
            }
          }
          this.videoIsAllScreen = false;
        } catch (error) {
          console.err(error);
        }
      }else{//要全屏
        console.log("要全屏");
        // 判断各种浏览器，找到正确的方法
        let element = document.documentElement;
        var requestMethod = element.requestFullScreen || //W3C
          element.webkitRequestFullScreen || //FireFox
          element.mozRequestFullScreen || //Chrome等
          element.msRequestFullScreen; //IE11
        try {
          if (requestMethod) {
            requestMethod.call(element);
          } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
              wscript.SendKeys("{F11}");
            }
          }
          this.videoIsAllScreen = true;
          let that = this;
          that.screenAlling = true;
          setTimeout(() => {
            that.screenAlling = false;
          }, 100);
        } catch (error) {
          console.err(error);
        }
      }
    },
    getScreenNums(num){//设置分屏的数目----共用
      let result = 1;
      if(num<3){
        result = num;
      }else if(num<=4){
        result = 4;
      }else if(num<=6){
        result = 6;
      }else if(num<=8){
        result = 8;
      }else if(num<=9){
        result = 9;
      }else if(num<=16){
        result = 16;
      }else if(num<=25){
        result = 25;
      }else if(num<=36){
        result = 36;
      }else{
        result = 64;
      }
      return result;
    },
    changeScreen(num){//分屏----共用
      num = this.getScreenNums(num);
      console.log("我要分频",num);
      let start = this.playH5List.length;
      if(num>start){//增加
        for (let i = start; i < num; i++) {
          this.playH5List.push({id: this.randomStr(8),hadUsed: false,isDevice:true,realPlay:true});
        }
      }else if(num<start){//减少
        let usedNum=0;
        for (let i = 0; i < this.playH5List.length; i++) {
          if(this.playH5List[i].hadUsed){
            ++usedNum;
          }
        }
        if(num<usedNum){
          this.$message.warning("分屏数不能少于已使用的屏幕数！");
          return;
          // for (let h = 0; h < num; h++) {
          //   this.playH5List[h].hide = true;//播放中的隐藏即可---未实现
          // }
        }
        let delN = start-num;//要减少的数量
        for (let i = 0; i < this.playH5List.length; i++) {
          if(delN>0){
            if(!this.playH5List[i].hadUsed){
              --delN;
              this.playH5List.splice(i,1);
              --i;
            }
          }else{
            break;
          }
        }
        //重新排序，把使用的排前面
        this.playH5List.sort(function(a, b) {
          if(a.hadUsed===b.hadUsed){
            return 0;
          }else if(a.hadUsed&&!b.hadUsed){
            return -1;
          }else{
            return 1;
          }
        });
      }
    },
    closeAllVideo(){//关闭所有视频
      console.log("--------");
      this.$refs.h5play.closeAllPlayH5();
    },
    applyPlayH5(devData,streamType){//播放
      let _i = this.playH5List.findIndex(_=>_.terminalId===devData.device&&_.channel===devData.id);
      console.log(_i)
      if(_i>-1){
        // this.$refs.h5play.specifyPlayVideoH5(_i);//第几个窗口
        return;
      }
      let needAddScreen = true;//需要添加窗口
      for (let n = 0; n < this.playH5List.length; n++) {
        if(!this.playH5List[n].hadUsed){//找到未使用的窗口然后用起来
          needAddScreen = false;
          this.playH5List[n].terminalId = devData.device;
          this.playH5List[n].name = devData.name;
          this.playH5List[n].channel = devData.id;
          this.playH5List[n].streamType = streamType;
          this.$refs.h5play.specifyPlayVideoH5(n,streamType);//第几个窗口，从0开始；码流类型
          break;
        }
      }
      if(this.playH5List.length==64){
        this.$message.warning("当前预览数量已达到最大数！");
        return;
      }
      if(needAddScreen){//需要添加窗口
        let num = this.playH5List.length;
        this.changeScreen(num+1);
        this.playH5List[num].terminalId = devData.device;
        this.playH5List[num].name = devData.name;
        this.playH5List[num].channel = devData.id;
        this.playH5List[num].streamType = streamType;
        this.$refs.h5play.specifyPlayVideoH5(num,streamType);//第几个窗口，从0开始；码流类型
      }
    },
    updateParent(item){//播放成功后回调更新数据
      let that = this;
      let sIndex = that.playH5List.findIndex(_=>_.id==item.screenId);
      if(item.oprateType==1){//播放单个时触发
        that.playH5List[sIndex].hadUsed = true;//标志为已使用
        that.playH5List[sIndex].state = 1;//标志为播放状态
      }else if(item.oprateType==2){//清除单个时触发
        that.playH5List[sIndex].hadUsed = false;//标志为未使用
        if(that.currentScreen.device==that.playH5List[sIndex].terminalId&&that.currentScreen.channel==that.playH5List[sIndex].channel){
          this.currentScreen = {};
        }
        for (let key in that.playH5List[sIndex]) {//初始化窗口
          if (that.playH5List[sIndex].hasOwnProperty(key)&&key!="id"&&key!="hadUsed"&&key!="isDevice"&&key!="realPlay") {
            delete that.playH5List[sIndex][key];
          }
        }
      }else if(item.oprateType==4){//触发关闭全部
        that.closeAllVideo();
      }
    },
    selectTreeNode(data,type){//点击勾选上车辆
      if(type=="click"){
        console.log(data);
        this.applyPlayH5(data,this.currentStreamType);
      }
    },
  }
};
</script>


